import { useState } from "react";
import HomePage_TableComponent from "../../../../component/table";
import HomePage_ModalComponent from "../../../../component/modal";
import HomePage_DebuggingAndTestingPage_StrategicInvestmentPage_ModalComponent from "./component/modal";

// 主页-调试测试页面-策略投切页面
const HomePage_DebuggingAndTestingPage_StrategicInvestmentPage: React.FC = () => {
    const columnList = [
        {
            title: '序号',
            width: 60,
            render: (text: string, record: object, idx: number) => idx + 1,
        },
        {
            title: '巡回中心',
            minWidth: 85,
            dataIndex: 'age',
            render: (text: string) => text ?? "-"
        },
        {
            title: '安装站点',
            minWidth: 85,
            dataIndex: 'address',
            render: (text: string) => text ?? "-"
        },

        {
            title: '隔直装置',
            minWidth: 85,
            dataIndex: 'tags',
            render: (text: string) => text ?? "-"
        },
        {
            title: '安装主变',
            minWidth: 85,
            dataIndex: 'tags',
            align: "center",
            render: (text: string) => text ?? "-"
        },
        {
            title: '调度编号',
            minWidth: 85,
            dataIndex: 'tags',
            align: "center",
            render: (text: string) => text ?? "-"
        },
        {
            title: '通讯状态',
            minWidth: 85,
            dataIndex: 'tags',
            align: "center",
            render: (text: string) => text ?? "-"
        },
        {
            title: '当前状态',
            minWidth: 85,
            dataIndex: 'tags',
            align: "center",
            render: (text: string) => text ?? "-"
        },
        {
            title: '点电流限值',
            minWidth: 100,
            dataIndex: 'tags',
            align: "right",
            render: (text: string) => text ?? "-"
        },
        {
            title: '模式状态',
            minWidth: 85,
            dataIndex: 'tags',
            align: "center",
            render: (text: string) => text ?? "-"
        },
        {
            title: '定时区间',
            minWidth: 85,
            dataIndex: 'tags',
            align: "right",
            render: (text: string) => text ?? "-"
        },
        {
            title: '投切设置',
            align: "right",
            width: 90,
            fixed: "right",
            render: (text: string, record: object, idx: number) => <span className="homePage-tableOperationBtn" onClick={() => click_modify(record)}>修改</span>
        },

    ];
    const [isModal, setIsModal] = useState<boolean>(false)
    const [modalData, setModalData] = useState<object>({})
    const click_modify = (data: object) => {
        setModalData(data)
        setIsModal(true)
    }
    return (
        <>
            <HomePage_TableComponent name="homePageDebuggingAndTestingPageStrategicInvestmentPageTable" columnList={columnList} alignCenterList={["安装主变", "调度编号", "通讯状态", "当前状态", "模式状态"]} alignRightList={["点电流限值", "定时区间", "投切设置"]} sourceData={{ list: [{ address: 5555, age: 88888888 }, {}, {}] }} />
            {
                isModal && <HomePage_ModalComponent width={500} change_cancel={setIsModal} contentComponent={<HomePage_DebuggingAndTestingPage_StrategicInvestmentPage_ModalComponent modalData={modalData} change_cancel={setIsModal} />} />
            }
        </>
    )
}
export default HomePage_DebuggingAndTestingPage_StrategicInvestmentPage